<template>
	<view :key="refreshKey">
		<view class="quanyi animate__rotateIn" style="animation-duration: 2s;">
			<image src="../../static/img/quanyi.png" mode="aspectFit"></image>
		</view>
		<view class="dqdj animate__slideInDown" style="animation-duration: 2s;">
			<view class="vip1">{{ user_vip == 0 ? '':  'VIP' + (user_vip-1) }}</view>
			<view class="vip2">
				<view class="vip2-1">
					当前等级
				</view>
				<view class="vip2-2">
					VIP{{ user_vip }}
				</view>
			</view>
			<view class="vip3">VIP{{ user_vip+1 }}</view>
		</view>
		<view class="djqy animate__flash" style="animation-duration: 2s;">
			<image src="../../static/img/djqy.png"></image>
		</view>
		<view class="team-member animate__slideInLeft" style="animation-duration: 2s;">
			<view class="custom-table">
				<view class="custom-table-tr">
					<view class="custom-table-th">
						等级
					</view>
					<view class="custom-table-th">
						<view>升级条件</view>
					</view>
					<view class="custom-table-th">
						加息率(%)
					</view>
				</view>
				<view class="custom-table-tr" v-for="record in records">
					<view class="custom-table-td custom-table-td-link">
						{{record.memberLevelName}}
					</view>
					<view class="custom-table-td custom-table-td-highlight">
						<view>充值金额达到 {{record.requireRechargeAmount}}</view>
					</view>
					<view class="custom-table-td custom-table-td-highlight">
						{{record.additionalRate}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				records: [],
				user_vip:0,
				refreshKey:0
			}
		},
		onShow(){
			this.getMemberInfo();
			this.refreshKey += 1;
		},
		onLoad() {
			this.findAllMemberLevel();
			this.getMemberInfo();
		},
		methods: {
			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					that.user_vip = res.data.memberLevelNum;
				});
			},

			findAllMemberLevel() {
				var that = this;
				uni.$uv.http.get('/member/findAllMemberLevel', {
					params: {}
				}).then(res => {
					that.records = res.data;
				});
			},
		}
	}
</script>

<style>
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
}
.quanyi{
	display: flex;
	justify-content: center;
}
.djqy{
	margin-top: 120rpx;
	display: flex;
	justify-content: center;
	image{
		height: 120rpx;
		width: 500rpx;
	}
}
.custom-table {
	    margin-top: 40rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		
		.table-leve {
			width: 17%;
			margin: 0 10rpx;
			text-align: center;
		}

		.table-number {
			width: 168rpx;

			.item1 {
				margin-bottom: 16rpx;
			}

			.number-item {
				display: flex;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 20rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				.number {
					color: #E4D494;
					margin-left: 8rpx;
				}
			}
		}

		.table-name {
			flex: 1;
			text-align: left;
		}

	}

	.custom-table-tr {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1rpx solid #E7E7E7;
		padding: 0 20rpx;
	}
	.custom-table-tr-th {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-image: url('../../static/img/mj/team-bg.png');
		background-size: 100% 100%;
		background-position: center;
		border-bottom: 1rpx solid #E7E7E7;
		padding: 0 20rpx;
	}
	.dqdj{
		width: 100%;
		height: 100rpx;
		background-image: url('../../static/img/mj/dqdj.png');
		background-size: 100% 100%;
		position: relative;
		font-size: 29rpx;
		.vip1{
			position: absolute;
			left:50rpx;
			top:80rpx;
		}
		.vip2{
			position: absolute;
			left: 50%;
            transform: translateX(-50%) translateY(-50%);
			text-align: center;
			top:150%;
			.vip2-1{
				font-size: 24rpx;
			}
			.vip2-2{
				font-size: 38rpx;
				font-weight: 550;
			}
		}
		.vip3{
			position: absolute;
			right:40rpx;
			top:88rpx;
		}
	}

	.custom-table-th {
		height: 64rpx;
		text-align: center;
		padding: 8rpx 4rpx;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		justify-content: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #24282D;
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		text-align: center;
	}

	.custom-table-td {
		text-align: center;
		padding: 8rpx 4rpx;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		justify-content: center;
		font-weight: 400;
		font-size: 30rpx;
		color: #24282D;
		line-height: 70rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.custom-table-td-link {
	}

	.custom-table-td-highlight {
		color: #24282D;
	}

	.statistic-item-label {
		color: #fff;
		letter-spacing: 2rpx;
		font-size: 26rpx;
		padding-bottom: 32rpx;
	}

	.statistic-item-value {
		color: #fff;
		font-size: 26rpx;
	}

	.statistic-item {
		width: 43%;
		background: hsla(0, 0%, 100%, .2);
		border-radius: 16rpx;
		padding: 32rpx 20rpx;
		margin-bottom: 32rpx;
	}

	.statistic-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.statistic {
		margin: 32rpx 16rpx;
		background: linear-gradient(180.44deg, #0068b7, #b9d4e9);
		border-radius: 16rpx;
		padding: 16rpx 16rpx;
	}
	

	.statistic-title {
		color: #fff;
		letter-spacing: 2rpx;
		font-size: 34rpx;
		margin-bottom: 32rpx;
	}
</style>